import { Component, toNative } from 'vue-facing-decorator'
import Render from '@/render/Render'
import { getInsurePeriodServeCompanyDetail } from '@/api/insurance/serveCompany'
import type { InsurePeriodServeCompanyDto } from '@/api/insurance/serveCompany/types'
import AccountInfo from './components/AccountInfo'
import SpecialAppoint from './components/SpecialAppoint'
import SystemOccupation from './components/SystemOccupation'
import OccupationRecord from './components/OccupationRecord'
@Component
export class DetailView extends Render {
    id = 0

    activeName = 'teamManagement'

    companyInfo = {} as InsurePeriodServeCompanyDto

    async initCompanyBasicData() {
        const res = await getInsurePeriodServeCompanyDetail(this.id)
        this.companyInfo = res
    }

    created() {
        if (this.$route.params?.id) {
            this.id = parseInt(this.$route.params.id as string)
            this.initCompanyBasicData()
        }
    }

    render() {
        return (
            <div class="flex flex-col h-full">
                <AccountInfo serveCompanyInfo={this.companyInfo} onRefresh={this.initCompanyBasicData}/>
                <div class="bg-white px-24px pt-20px rounded-sm flex-1">
                    <SpecialAppoint serveCompanyInfo={this.companyInfo} onRefresh={this.initCompanyBasicData}/>
                    <SystemOccupation class="flex-1" serveCompanyInfo={this.companyInfo} onRefresh={this.initCompanyBasicData}/>
                    <OccupationRecord serveCompanyInfo={this.companyInfo}/>
                </div>
            </div>
        )
    }
}

export default toNative(DetailView)
